<template>
	<view>
		<view class="one">
			<view class="re">
				付费精品 <span class="hot">NICE</span>
			</view>
			<view class="you">
				全部 <i class="iconfont icon-right"></i>
			</view>
		</view>
		<view class="two" v-for="item,index in tuijian" :key="item.id">
			<view class="left"><img :src="item.mainImage" alt="">
				<view class="shij">
					{{item.totalTime}}
				</view>
			</view>
			<view class="right">
				<p>{{item.title}}</p>
				<p class="teacher"><i class="iconfont icon-laoshi2" style="font-size: 12px;"></i>{{item.nickName}}</p>
				<view class="small">
					<span class="money" v-if="item.isFree"><i class="iconfont icon-moneybag"
							style="font-size: 12px;"></i>免费</span>
					<span class="money" v-else><i class="iconfont icon-moneybag"
							style="font-size: 12px;"></i>{{item.priceDiscount||item.priceOriginal}}</span>
					<span class="zaidu"><i class="iconfont icon-video"
							style="font-size: 12px;"></i>{{item.studyTotal}}人在学</span>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		getHotList
	} from '../../unti/api.js'
	import {
		reactive,
		ref
	} from 'vue'
	import {onReachBottom} from '@dcloudio/uni-app'
	export default {

			setup(props, context) {
				let data=reactive({
					isFree:0,
					current:'',
					size:10
				})
		
				let tuijian = ref([])
				const Tui = getHotList({
					isFree:0,
					current:data.currentPage,
					size:10
				}).then((res) => {
					console.log(res,'2323');
					// page.value=
					tuijian.value = res.data.data.records.filter(item=>item.isFree==0)
					console.log(tuijian);
				})
				
				//页面触底事件
					onReachBottom(()=>{
						console.log(1);
					})

				return {
					tuijian
				}
			}
	}
</script>

<style>
	@import'../../static/static/icon/iconfont.css';

	.zaidu {
		margin-left: 20px;
		font-size: 12px;
	}

	.money {
		color: orange;
		font-size: 12px;
	}

	.hot {
		background-color: red;
		padding: 0px 1px;
		color: white;
		font-size: 13px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.one {
		height: 50px;
		line-height: 50px;
	}

	.two {
		display: flex;
		margin: 20px 10px;
	}

	.teacher {
		font-size: 13px;
		color: #ccc;
	}

	.re {
		float: left;
		font-size: 20px;
	}

	.you {
		float: right;
		font-size: 14px;
		color: #ccc;
	}

	.right {
		flex: 1;
		margin-left: 10px;
	}

	.left {
		width: 40%;
		height: 90px;
		border-radius: 10px;
		position: relative;
	}

	.shij {
		position: absolute;
		padding: 2px 4px;
		border-radius: 30px;
		background: rgba(1, 0, 0, 0.5);
		color: white;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 7rpx;
	}

	.left img {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
</style>
